<template>
  <view class="my-box">
    <jianbianVue></jianbianVue>
    <view class="handie">
      <view class="han-box">
        <view class="back-l">
          <u-icon name="arrow-left" size="60rpx" @click="backk"></u-icon>
        </view>
        <!-- 头像 -->
        <view class="img">
          <view class="img-box"
            style="width: 60px; height: 60px;border-radius: 50%; margin-top: 20rpx;margin-left: 20rpx;">
            <image :src="url" mode="" style="width: 60px; height: 60px;border-radius: 50%;" @click="chooseimage">
            </image>
          </view>
          <view class="name-box">
            <view class="name">
              爱吃草莓蛋糕的懒洋洋
            </view>
            <view class="yong">
              普通用户
            </view>
          </view>
          <view class="xin">
            <image src="/static/信息.png" mode=""></image>
          </view>
        </view>
        <!-- 会员中心 -->
        <view class="vip-box">
          <view class="vip-left">
            会员中心
          </view>
          <text style="color: white; padding: 0rpx 10rpx;">|</text>
          <view class="vip-cent">
            首次开会员,领取66元专享红包!
          </view>
          <view class="vip-right">
            立即开通
          </view>
        </view>
        <!-- 余额 -->
        <view class="bot-box">
          <view class="you-boc" v-for="(item,index) in you" :key="index">
            <view style="color: #40b272;">
              ￥<text style="font-size: 50rpx; font-weight: bolder;">{{item.you}}</text>
            </view>
            <view style="font-weight: bolder;">
              {{item.tiee}}
            </view>
          </view>
        </view>
      </view>
      <!-- 我的订单 -->
      <view class="my-dd">
        <view style="display: flex; width: 100%;justify-content: space-between;">
          <view style="font-weight: bolder;font-size: 45rpx;margin-left: 20rpx; margin-top: 10rpx;">
            我的订单
          </view>
          <view style="margin-top: 10rpx;margin-right: 20rpx;">
            全部订单 <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="md-box">
          <view class="di-box" v-for="(item,index) in ding" :key="index">
            <view class="db-img">
              <image :src="item.imgurl" mode=""></image>
            </view>
            <view class="db-title">
              {{item.mne}}
            </view>
          </view>
        </view>
      </view>
      <!-- 我的服务 -->
      <view class="fw-dd">
        <view style="display: flex; width: 100%;justify-content: space-between;">
          <view style="font-weight: bolder;font-size: 45rpx;margin-left: 20rpx;margin-top: 10rpx;">
            我的服务
          </view>
        </view>
        <view class="fw-box">
          <view class="fb-box" v-for="(item,index) in fuwu" :key="index">
            <view class="fs-img">
              <image :src="item.imgeurl" mode=""></image>
            </view>
            <view class="fs-title">
              {{item.mnee}}
            </view>
          </view>
        </view>
      </view>
      <!-- 安全中心 -->
      <view class="Security">
        <view style="font-weight: bolder;font-size: 45rpx;margin-left: 20rpx;margin-top: 10rpx;">
          安全中心
        </view>
        <view class="secu-bottom" v-for="(item,index) in security" :key="index">
          <view class="se-im">
            <image :src="item.imgeurl" mode=""></image>
          </view>
          <view class="se-tit">
            {{item.mnee}}
          </view>
          <view class="se-icon">
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import jianbianVue from '../../compoents/jianbian/jianbian.vue';
  export default {
    components: {
      jianbianVue
    },
    data() {
      return {
        security: [{
            imgeurl: '/static/客服.png',
            mnee: '客服与帮助'
          },
          {
            imgeurl: '/static/收货地址.png',
            mnee: '收货地址'
          },
          {
            imgeurl: '/static/设置.png',
            mnee: '设置'
          },
        ],
        ding: [{
            imgurl: '/static/待支付.png',
            mne: '待支付'
          },
          {
            imgurl: '/static/待配送.png',
            mne: '待配送'
          },
          {
            imgurl: '/static/配送中.png',
            mne: '配送中'
          },
          {
            imgurl: '/static/待评价-我的.png',
            mne: '待评价'
          },
          {
            imgurl: '/static/售后.png',
            mne: '售后'
          }
        ],
        fuwu: [{
            imgeurl: '/static/积分商城.png',
            mnee: '积分商城'
          },
          {
            imgeurl: '/static/商品收藏.png',
            mnee: '商品收藏'
          },
          {
            imgeurl: '/static/推荐有礼.png',
            mnee: '推荐有礼'
          },
          {
            imgeurl: '/static/助力.png',
            mnee: '助力免费拿'
          },
        ],
        ding: [{
            imgurl: '/static/待支付.png',
            mne: '待支付'
          },
          {
            imgurl: '/static/待配送.png',
            mne: '待配送'
          },
          {
            imgurl: '/static/配送中.png',
            mne: '配送中'
          },
          {
            imgurl: '/static/待评价-我的.png',
            mne: '待评价'
          },
          {
            imgurl: '/static/售后.png',
            mne: '售后'
          }
        ],
        url: '../../static/tox.jpg',
        you: [{
            you: '0',
            tiee: '余额'
          },
          {
            you: '3',
            tiee: '优惠券'
          },
          {
            you: '0',
            tiee: '金额'
          },
          {
            you: '4',
            tiee: '收益'
          }
        ]
      }
    },
    methods: {
      backk(){
        uni.switchTab({
          url:'/pages/index/index'
        })
      },
      chooseimage() {
        let t = this;
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            console.log(JSON.stringify(res.tempFilePaths));
            t.url = res.tempFilePaths[0]
            console.log(t.url);
          }
        });

      }
    }
  }
</script>

<style lang="scss">
  .my-box {
    width: 100%;
    position: relative;

    .handie {
      width: 100%;
      // height: 100vh;
      margin: auto;
      background-color: rgba(132, 132, 132, 0.1);
      position: absolute;
      top: 100px;

      .han-box {
        width: 90%;
        margin: auto;
        border-radius: 10rpx;
        background-color: white;
        border: 1px solid white;
        .back-l{
          position: absolute;
          top: -100rpx;
        }
        .img {
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin-top: 20rpx;

          .name-box {
            margin-top: 30rpx;

            .name {
              font-size: 35rpx;
              font-weight: bolder;
            }

            .yong {
              width: 150rpx;
              height: 50rpx;
              line-height: 50rpx;
              text-align: center;
              border-radius: 10rpx;
              margin-top: 10rpx;
              color: white;
              background-color: #3eb874;
            }
          }

          .xin {
            width: 50rpx;
            height: 50rpx;
            margin-top: 50rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .vip-box {
          margin-top: 100rpx;
          height: 90rpx;
          line-height: 90rpx;
          border-radius: 20rpx;
          background-color: #3eb874;
          display: flex;
          justify-content: space-around;

          .vip-left {
            width: 23%;
            font-weight: bolder;
            font-size: 35rpx;
            color: white;
            margin-left: 20rpx;
          }

          .vip-cent {
            width: 50%;
            font-size: 20rpx;
            color: white;
          }

          .vip-right {
            width: 23%;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            border-radius: 50rpx;
            margin-top: 20rpx;
            margin-right: 20rpx;
            color: #3eb874;
            background-color: white;
          }
        }

        .bot-box {
          width: 100%;
          margin-top: 50rpx;
          margin-bottom: 50rpx;
          text-align: center;
          display: flex;
          justify-content: space-around;

          .you-boc {
            width: 23%;
          }
        }
      }

      .my-dd {
        width: 90%;
        margin: auto;
        margin-top: 30rpx;
        border: 1px solid white;
        border-radius: 10rpx;
        background-color: white;

        .md-box {
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin: 50rpx 0rpx;

          .di-box {
            width: 20%;
            text-align: center;

            .db-title {
              font-weight: bolder;
            }

            .db-img {
              width: 100%;

              image {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }
        }
      }

      .fw-dd {
        width: 90%;
        margin: auto;
        margin-top: 30rpx;
        border: 1px solid white;
        border-radius: 10rpx;
        background-color: white;

        .fw-box {
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin: 50rpx 0rpx;

          .fb-box {
            width: 24%;
            text-align: center;

            .fs-title {
              font-weight: bolder;
            }

            .fs-img {
              width: 100%;

              image {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }
        }
      }

      .Security {
        width: 90%;
        margin: auto;
        margin-bottom: 80px;
        border: 1px solid white;
        margin-top: 30rpx;
        border-radius: 10rpx;
        background-color: white;

        .secu-bottom {
          width: 100%;
          margin: 20rpx 10rpx;
          display: flex;
          justify-content: space-between;
          .se-im {
            width: 20%;
            image {
              width: 50rpx;
              height: 50rpx;
            }
          }
          .se-tit{
            width: 55%;
            margin-left: -60px;
            text-align: left;
            font-weight: bolder;
          }
          .se-icon{
            width: 20%;
            margin-right: 20px;
            text-align: right;
          }
        }
      }
    }
  }
</style>